<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">客户到访表</block>
		</cu-custom>
		<view v-if="list.length != 0">
			
			<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
			 :scroll-with-animation="true" :enable-back-to-top="true">
				<block v-for="(item,index) in list" :key="index">
					<view :class="'indexItem-' + item.userName" 
						:id="'indexes-' + item.userName" 
						:data-index="item.userName" 
						@tap.stop.prevent="jump" :data-src='"/pagesA/visitors_detail/visitors_detail?id="+ item.id'
						@longpress.stop.prevent="showModal" data-target="Modal" :data-id="item.id"
					>
						<view class="cu-list menu-avatar no-padding">
							<view class="cu-item">
								<view class="cu-avatar round lg margin-xs bg-gradual-green">
									<text class="avatar-text">
										{{ item.userName }}
									</text>
								</view>
								<view class="content">
									<view class="text-black">{{ item.userName }}
									<text style="background-color: #D1EDFF;margin-left: 15upx;color: #24AFF5;border-radius: 5upx;font-size: 22upx;padding: 0 10upx;">{{item.mark}}</text>
									<text style="background-color: #D1EDFF;margin-left: 15upx;color: #24AFF5;border-radius: 5upx;font-size: 22upx;padding: 0 10upx;">{{item.label}}</text>
									</view>
									<view class="text-gray text-sm">
										{{item.phone}}
									</view>
									<view class="text-gray text-sm">
										添加时间:{{item.createTime}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view v-if="list.length == 0" style="width: 100%;margin: 0 auto;">
			<image src="../../static/11.png" mode="widthFix" style="margin: 200upx auto;display: block;"></image>
		</view>
		
		<!-- 显示删除弹窗 -->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content" style="font-size: 36upx;">移出该访客?</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="" style="display: flex;height: 100%;">
						<view class="" style="flex: 1;color: #39B54A;" @click="del">
							确认
						</view>
						<view class="" style="flex: 1;" @tap="hideModal">
							取消
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view @click="jump" data-src='/pagesA/add_customer/add_customer' style="position: fixed;bottom: 250upx;right: 20upx;">
			<view class="cu-avatar lg margin-xs " style="background-color: #fff;">
				<image src="/static/tianjia.png" mode="widthFix"></image>
			</view>
			<view style="font-size: 22upx;color: #666;text-align: center;color: #3A89BE;">
				添加客户
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				list:[],
				openid:'',
				CustomBar: this.CustomBar,
			};
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setajax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},
		methods:{
			setajax(){
				var data = {
					'CoachId': this.openid,
				}
				uni.request({
					url: 'https://jxjsservice.jxfit.cn/coach/visitors/getVisitorsRecordByCoachId',
					method: 'GET',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						if (res.data.result == 200) {
							this.list = res.data.datas
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			del () {
				uni.request({
					url: 'https://jxjsservice.jxfit.cn/coach/visitors/delVisitorsRecord',
					method: 'POST',
					data: {
						'id': this.id,
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if (res.data.result == 200) {
							this.hideModal()
							setTimeout(function() {
								uni.showToast({
									title: '移出成功',
									icon: 'none'
								})
							}, 300);
							// 最好的方法是数组静态移出不是刷新数组
							this.setajax()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
				// 存用户id用来删除
				this.id = e.currentTarget.dataset.id
			},
			hideModal(e) {
				this.modalName = null
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
	
	.btn {
		position: fixed;
		bottom: 70upx;
		left: 50%;
		font-size: 28upx;
		background-color: #fff;
		transform: translate(-50%, 0%);
		border-radius: 50upx;
		box-shadow: 0px 6px 5px #888888;
	}
	button::after {
		border: none;
	}
	.indexes {
		position: relative;
	}
	
	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}
	
	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}
	
	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}
	
	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}
	
	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}
	
	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
</style>
